<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Telsa 官方商店</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="./css/details.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
</head>
<body>
    <!-- top -->
    <div class="top">
        <div class="topl">
            <div class="iconfont tlogo"><a href="./index.html">&#xea37;</a></div>
            <span><a href="">商店</a></span>
        </div>
        <div class="topc">
            <ul>
                <li><a href="">店铺活动</a></li>
                <li><a href="">充电产品</a></li>
                <li><a href="">优选配件</a></li>
                <li><a href="">精选服饰</a></li>
                <li><a href="">周边精品</a></li>
            </ul>
        </div>
        <div class="topr">
            <span id="login"><a href="./login.html">登录</a></span>
            <span class="iconfont">&#xe6e4;</span>
            <span class="iconfont">&#xe600;</span>
        </div>
        <script src="./js/jquery.js"></script>
        <script>
          // 登录守卫
          // 判断是否具有登录标志
          if(localStorage.getItem("isLogin") === "OK"){
            // 登录了
            $("#login").html(`<a href="./Personal.html">${localStorage.getItem("username")}</a>`)
          }else{
            // 没登录
            $("#login").html(`<a href="./login.html">登录</a>`)
          }
        </script>
    </div>
    <!-- baner -->
    <div class="banner">
        <div class="ban">
            <div><a href="">点击购买  &nbsp;家庭充电服务包</a></div>
            <div><a href="">随时在家为特斯拉充电</a></div>
        </div>
    </div>
    <!-- left or right -->
    <div class="lr">
        <span>畅销商品</span>
        <span>查看全部</span>
    </div>
    <!-- 轮播图 -->
    <!-- Swiper -->
    <style>
      .goods_list{width: 1000px;margin: 0 auto;overflow: hidden;border: solid 1px black;}
      .goods_list .box{width: 250px;border: solid 1px black;box-sizing: border-box;float: left;text-align: center;padding: 10px;}
      .box img{width: 80%;}
      .box p{line-height: 20px;height: 40px;overflow: hidden;}
    </style>
    <div class="goods_list">
        <p>商品卖完了....</p>
    </div>
  <script>
    $.ajax({
      url:"./data/goods.json",
      success:res=>{
        res = JSON.parse(res)
        let str = "";
        res.forEach(val=>{
          str += `<div class="box" index="${val.goodsId}">
                    <a href="./Details_page.html?id=${val.goodsId}"><img src="${val.proImg}" alt="">
                        <p>${val.proName}</p>
                        <p>${val.price}</p>
                        <button class="add">加入购物车</button></a>
                  </div>`
        })
        $(".goods_list").html(str);
      }
    })
  </script>
  <!-- 标签图 -->
  <div class="nvscce">
    <div>
      <a href="">
        <img src="./imgs/lby13.jpg" alt="">
        <span>男装</span>
      </a>
    </div>
    <div class="nannv">
        <img src="./imgs/lby14.jpg" alt="">
        <span>女装</span>
    </div>
    
  </div>

  <div class="sacce">
    <div>
        <img src="./imgs/lby8.jpg" alt="">
        <span>Model S 配件</span>
    </div>
  </div>

  <div class="xxscce">
    <div>
        <img src="./imgs/lby9.jpg" alt="">
        <span>Model 3 配件</span>
    </div>
    <div>
        <img src="./imgs/lby10.jpg" alt="">
        <span>Model X 配件</span>
    </div>
    
  </div>

  <div class="Yacce">
    <div>
        <img src="./imgs/lby11.jpg" alt="">
        <span>Model Y 配件</span>
    </div>
  </div>
  <div class="Zacce">
    <div>
        <img src="./imgs/lby15.jpg" alt="">
        <span>周边精品</span>
    </div>
  </div>
  <div class="foot">
    <ul>
      <li>Tesla © 2021</li>
      <li>隐私和法律</li>
      <li>沪ICP备2021004806号-1</li>
      <li>工作机会</li>
      <li>商店常见问题</li>
      <li>tesla.cn</li>
    </ul>
  </div>




</body>
<script src="./js/swiper-bundle.min.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 3,
      spaceBetween: 30,
      slidesPerGroup: 3,
      loop: true,
      loopFillGroupWithBlank: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>
</html>